<template>
	
	<div class="mealrefund" v-if="parentData.student">
		<el-dialog 	
			 class="mealfeeDialog"
			:visible.sync="parentData.show"
			:close-on-click-modal="parentData.modalclose"
			:modal="false"
			:before-close="closeDialog"
			element-loading-background="rgba(0, 0, 0, 0.1)"
			custom-class="mealfeerefund"
			>
			<div class="title">退费</div>
			<div class="student-info">
				<el-row>
					<el-col :span="6"><span>学员姓名：</span><span>{{parentData.student.realName}}</span></el-col>
					<el-col :span="6"><span>联系人：</span><span v-if="parentData.student.studentParentEntityList&&parentData.student.studentParentEntityList.length>0">
						{{parentData.student.studentParentEntityList[0].parentName}}</span></el-col>
					<el-col :span="6"><span>联系电话：</span><span v-if="parentData.student.studentParentEntityList&&parentData.student.studentParentEntityList.length>0">
						{{parentData.student.studentParentEntityList[0].phone}}</span></el-col>
					<el-col :span="6"></el-col>
				</el-row>
			</div>
			<div class="content-box">
				<section>
					<div class="h-title">请选择退费餐费</div>
					<div class="meallist-box">
						<div class="tablecss">
		              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
				      			<thead>
				      				<tr>				      					
				      					<th></th>
				      					<th>名称</th>
				      					<th>单价</th>		
				      					<th>购买数量</th>
				      					<th>合计</th>
				      					<th>实际支付</th>				      					
				      				</tr>				      				
				      			</thead>
				      			<tbody  v-if="parentData.datameallist.length>0">
				      				<tr v-for="li in parentData.datameallist">				      					
				      					<td align="center" style="width:0.5rem;"><el-checkbox @change="changeCheck(li)" v-model="li.checked"></el-checkbox></td>
				      					<td align="center">{{li.mealsName}}</td>
				      					<td align="center">￥{{li.price}}</td>
				      					<td align="center">{{li.mealsNum}}</td>
				      					<td align="center">￥{{li.totalMoney}}</td>
				      					<td align="center">￥{{li.realMoney}}</td>				      				
				      				</tr>	      				
				      			</tbody>
				      			<tbody  v-else>
					      				<tr>
					      					<td colspan="11" align="center">暂无数据</td>
					      				</tr>
					      		</tbody>
			      		    </table>
				      	</div>
					</div>
				</section>
				<section>
					<div class="h-title">退费结算</div>
					<div class="meallist-box">
						<div class="tablecss">
		              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
				      			<thead>
				      				<tr>				      					
				      					<th>名称</th>
				      					<th>单价</th>
				      					<th>购买数量</th>		
				      					<th>实际支付</th>
				      					<th>{{refundType==1?'符合退费天数':'需补交天数'}}</th>
				      					<th>{{refundType==1?'应退金额':'应补金额'}}</th>	
				      					<th>{{refundType==1?'应退费':'应补交'}}</th>
				      					<th>操作</th>		
				      				</tr>				      				
				      			</thead>
				      			<tbody  v-if="parentData.settlementlist.length>0">
				      				<tr v-for="li in parentData.settlementlist">				      					
				      					<td align="center">{{li.name}}</td>
				      					<td align="center">￥{{li.salesPrice}}</td>
				      					<td align="center">x{{li.times}}</td>
				      					<td align="center">￥{{li.realMoney}}</td>
				      					<td align="center">{{Math.abs(li.leaveDays)}}
											  <br/>
											  <a v-if="li.leaveDays!=0" href="javascript:void(0);" @click="ViewAttendance(li)">用餐记录</a>
										</td>
				      					<td align="center">￥{{Math.abs(li.refundMoney)}}</td>	
				      					<td align="center">￥{{Math.abs(li.refundMoney)}}</td>
				      					<td align="center"><a href="javascript:void(0);" @click="deletemealfee(li)">删除</a></td>
				      				</tr>	      				
				      			</tbody>
				      			<tbody  v-else>
					      				<tr>
					      					<td colspan="11" align="center">暂无数据</td>
					      				</tr>
					      		</tbody>
			      		    </table>
				      	</div>
					</div>
				</section>
			    <footer>
			    	<div class="total-box">
			    		<span v-if="refundType==1">已选餐费，总计退费：￥{{totalrefundmoney}}</span>
						<span v-else>已选餐费，总计补交：￥{{totalrefundmoney}}</span>
			    	</div>
			    </footer>
			</div>
			<div class="footer">
				<div class="btnCancel" @click="btnPre">上一步</div>
				<div style="width:0.1rem;"></div>
				<div class="btnOk" @click="btnOk" v-if="parentData.settlementlist.length>0">确定</div>
				<div class="btnOkDisabled" v-else>确定</div>
		    </div>
			
		</el-dialog>
	
	    <!--餐费退费-->
	    <mealrefundconfirm ref="mealrefundconfirm" @callback="opendialog"></mealrefundconfirm>
	    <!--学员考勤-->
		<attendance ref="attendance"></attendance>
	</div>
	
</template>

<script>
	let vm;
	import mealrefundconfirm from "./mealrefund_confirm"; //餐费退费
	import attendance from "./attendance"; //学员考勤
	export default{
		components:{mealrefundconfirm,attendance},
		data(){
			return{
				/**退费类型：1-正常退费；2-需补交金额 */
				refundType:1,
				parentData:{
					show:false,
					modalclose:false,
					checked:false,
					student:null,
					datameallist:[],
					settlementlist:[]
				}
			}
		},
		methods:{
			/**
			 * 数据初始化
			 */
			init(data){
				vm.$emit('callback');
				vm.parentData.student = data;
				vm.parentData.show = true;	
				vm.refundType=1;
				vm.parentData.settlementlist =[];		
				api.getAvailableRefundMealsOrder({studentId:vm.parentData.student.studentId}).then(function(data){
					vm.parentData.datameallist = [];
					// debugger					
					if(data.result=="操作成功"){
					   
					    vm.parentData.datameallist =  data.list.map(function(row){
							row.checked = false;
							let combinename=row.mealsName;
							if(row.useTime){
								let timearr=row.useTime.split('-');
								combinename=row.mealsName+'('+timearr[1]+'月)';
							}
							row.mealsName=combinename;
					    	return row;
					    })
					   
					}
					
				})
			},
			
			/**
			 * 餐费项选中
			 */
			changeCheck(li){
				//单选
				vm.parentData.datameallist.forEach(row=>{
					if(row.studentMealsId!=li.studentMealsId)
						row.checked=false;
				});
				
				if(li.checked){//选中
					vm.parentData.settlementlist=[];
					vm.refundType=1;
					if(li.leaveDays<0){
						// vm.refundType=2;
						this.$message({
							type:'warning',
							message:'余额不足，无法退费！'
						});
						return;
					}
					vm.parentData.settlementlist.push({
						studentMealsId:li.studentMealsId,
						mealsId:li.mealsId,
						name:li.mealsName,
						times:li.mealsNum,
						salesPrice:li.price,
						totalmoney:li.totalMoney,
						leaveDays:li.leaveDays||0,
						refundMoney:li.refundMoney||0,
						realMoney:li.realMoney||0,
						orderSignupId:li.orderSignupId,
						classSigninEntityList:li.classSigninEntityList,
						payMode:li.orderSignupEntity.payMode,
						useTime:li.useTime
					});
					
				}else{//去掉选中
					vm.parentData.settlementlist=[]
										
				}
				
			},
			/**
			 * 删除选中退费餐费项
			 */
			deletemealfee(li){
			
				for(let i=0;i<vm.parentData.settlementlist.length;i++){
					
					if(vm.parentData.settlementlist[i].studentMealsId==li.studentMealsId){							
					   vm.parentData.settlementlist.splice(i,1);						   
					}
				}	
				
				for(let i=0;i<vm.parentData.datameallist.length;i++){
					
					if(vm.parentData.datameallist[i].studentMealsId==li.studentMealsId){							
					   vm.parentData.datameallist[i].checked = false;					   
					}
				}
			},
			/**
			 * 确定
			 */
			btnOk(){
				vm.parentData.show = false;				
				vm.$refs.mealrefundconfirm.init(vm.parentData.settlementlist,vm.parentData.student);				
			},
			/**
			 * 上一步
			 */
			btnPre(){
				vm.$parent.setVisible();
				vm.parentData.settlementlist = [];
				vm.parentData.show = false;
			},
			/**
			 * 打开面板
			 */
			opendialog(){
				
				vm.parentData.show = true;
			},
			/**
			 * 清空数据
			 */
			cleardata(){
				vm.parentData.settlementlist =[];
			},
			/**
			 * 关闭弹框
			 */
			closeDialog(){
				vm.parentData.show = false;
				vm.parentData.settlementlist=[];			
			},
			/**
			 * 查看学员考勤
			 */
			ViewAttendance(li){
				// debugger
				//起止时间
				let m=new Date(li.useTime.replace(/-/g,'/'));
				m.setMonth(m.getMonth() + 1, 0);
				let startTime = tool.DateToString(m, "yyyy-MM-01 00:00:00");
				let endTime = tool.DateToString(m, "yyyy-MM-dd 23:59:59");

				let param={
					mealsType:1,
					mealsId:li.mealsId, 
					studentId:vm.parentData.student.studentId,
					studentName:vm.parentData.student.realName,
					startTime:startTime,
					endTime:endTime
				};
				vm.$refs.attendance.init(param);
			},
			/**
			 * 回调
			 */
			callback(){
				vm.parentData.show = true;
			}
		},
		
		computed:{
			totalrefundmoney:function(){
				let num = 0;
				let list = vm.parentData.settlementlist;
				for(let i=0;i<list.length;i++){
					
					num+= list[i].refundMoney;
				}
				return Math.abs(num);
			}			
		},		
		mounted(){			
			vm = this;
		}
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	.mealfeerefund{
		width:10rem !important;;
		border-radius: .1rem !important;;	
		margin-top:8vh !important;
	}
	.mealfeeDialog {
        z-index: 29 !important;
        top: 0.81rem !important;
        left: 2.1rem !important;
        background-color:rgba(0,0,0,0.5) !important;
        
        .el-dialog__header{
			padding: 0px;
		}
		.el-dialog__body{
			padding: 0px !important;
		}	
		.el-dialog__footer{
			padding: .3rem;
			.footer-btn{
				width:100%;
				text-align: center;									
		   }
		}
		.title{
		  	width:100%;
			height: 0.6rem;
			padding: 0.2rem 0.3rem;
			font-size: 0.2rem;
			font-weight: bold;
		}
		.student-info{
			width:100%;
			height: 0.6rem;
			padding: 0.2rem 0.3rem;
			font-size: 0.16rem;			
		}   
		.content-box{
			width:100%;
			height: auto;
			padding: 0.2rem 0.3rem;
			section > .h-title{
				font-weight: bold;
				font-size: 0.16rem;
				height: 0.4rem;
				line-height: 0.4rem;
			} 
			section > .meallist-box{
				.mealfee-list{
					height: auto;
					width: 100%;
					border:1px solid #F0F0F0;
					border-radius: 0.08rem;
					table{
						border: none;
					}
				}				
			}
			footer > .total-box{
				width: 100%;
				height: 0.4rem;
				text-align: right;
				line-height: 0.4rem;
				font-size: 0.16rem;
			}
		}
		.footer{
			width:100%;
			height: auto;
			display: inline-flex;
			justify-content: center;
			padding:0.2rem 0.3rem;
			.btnOkDisabled{
	            width:1.6rem;
	            height: 0.4rem;
	            line-height: 0.4rem;
	            text-align: center;
	            font-size: 0.16rem;
	            background: #DEDEDE;
	            color: #333333;
	            border-radius: 0.1rem;
	            cursor: not-allowed;
        	}
			.btnOk{
	            width:1.6rem;
	            height: 0.4rem;
	            line-height: 0.4rem;
	            text-align: center;
	            font-size: 0.16rem;
	            background: #3885F8;
	            color: #FFFFFF;
	            border-radius: 0.1rem;
	            cursor: pointer;
        	}
	        .btnOk:hover{
	            background: rgba(56, 133, 248, 0.8);
	        }
	        .btnCancel{
	            width:1.6rem;
	            height: 0.4rem;
	            line-height: 0.4rem;
	            text-align: center;
	            font-size: 0.16rem;
	            background: #FFFFFF;
	            border-radius: 0.1rem;
	            color: #333333;        
	            border: 0.01rem solid #C0C4CC;
	            cursor: pointer;
	          
	        }
	        .btnCancel:hover{
	            background: rgba(56,133,248,0.1)
	        }
		}
		 
    }
	
</style>